<template>
	<div id="footerBar" ref="footerBar">
		<div id="footerDiv">
			<div id="leftDiv">
				<div>主办单位：河北省石家庄市裕华区城市企业服务冀ICP备000000号-2</div>
				<div>中文域名：河北省石家庄市裕华区城市企业服务</div>
				<div>网站识别码：00000000000 冀公网安备 0000000000号</div>
			</div>
			<div id="rightDiv">
				<div v-for="icon,i in icons" :key="i" class="iconDiv">
					<img :src="icon.img" style="width: 30px; height: 30px">
					<div style="margin-top: 5px">{{icon.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "footerBar",
		data() {
			return {
				isFixed: false,
				icons: [{
					img: require('@/assets/image/footerBar/logoQuestion.png'),
					name: '常见问题'
				}, {
					img: require('@/assets/image/footerBar/logoMsg.png'),
					name: '联系我们'
				}, {
					img: require('@/assets/image/footerBar/logoEdit.png'),
					name: '网站声明'
				}, {
					img: require('@/assets/image/footerBar/logoMap.png'),
					name: '站点地图'
				}, {
					img: require('@/assets/image/footerBar/logoCheck.png'),
					name: '使用帮助'
				}]
			}
		}
	}
</script>

<style lang="scss" scoped>
	#footerBar {
		background-color: #045DB9;
		height: 150px;
	}
	#footerDiv {
		height: 150px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #FFFFFF;
		margin: 0 auto;
		width: $main-width;
	}

	#footerDiv #leftDiv {
		text-align: left;
		font-size: 12px;
		line-height: 20px;
	}

	#footerDiv #rightDiv {
		display: flex;
	}

	#footerDiv #rightDiv .iconDiv {
		margin-left: 20px;
		font-size: 12px;
	}

	#footerDiv #rightDiv .iconDiv:hover {
		cursor: pointer;
	}
</style>
